<template>
    <div class="cdn-stream">
        <video id="cdn-video-container" class="stream" playsinline webkit-playsinline></video>
    </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { PLAY_STATE } from '@/constants/room'
import { useStore } from 'vuex'

const store = useStore()
const liveDetail = computed(() => store.state.live.detail)

    const player = ref(null)
    const playState = ref(PLAY_STATE.PAUSED)
    const isPlaying = ref(false)
    onMounted(() => {
       initPlayer()
    })
    const initPlayer = () => {
        player.value = TCPlayer('cdn-video-container', {
            controls: true,
            autoplay: playState.value === PLAY_STATE.PLAYING,
            poster: '//'+ liveDetail.previewPicture
        });
        player.value.src(liveDetail.pullStreamUrl);
        playerListener();
        document.getElementById('cdn-video-container').style.width = '100%'
        document.getElementById('cdn-video-container').style.maxWidth = '100%'
        document.getElementById('cdn-video-container').style.height = '0'
        document.getElementById('cdn-video-container').style.paddingTop = '56.25%'
    }
    const playerListener = () => {
        player.value.on('error', () => {
            // isPlaying.value = false;
            // player.value.dispose();
            // setTimeout(() => {
            //     initPlayer();
            // }, 5000);
        });
        player.value.on('playing', () => {
            isPlaying.value = true;
        });
    }
</script>
<style lang="stylus" scoped>
.cdn-stream
  width 100%
  height 100%
  .stream
    width 100%
    height 100%
  .loading
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background-color #000000
    display flex
    &:before
        content "loading..."
        display block
        color #ffffff
        font-size 24px
        width 100px
        height 30px
        line-height 30px
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
</style>